<template>
    <div class="a">
        <div class="fixed">
            <h2>育儿百科</h2>
            <div class="xian"></div>  
            <div class="c">
                <div class="sel">
                  <select class="select">
                    <option value="孕期" >孕期</option>
                    <option value="0-1岁">0-1岁</option>
                    <option value="1-3岁">1-3岁</option>
                    <option value="取消">取消</option>
                </select>
                </div>
               <div class="inp">
                   <img src="../img/search.png" alt="" class="image">
                   <input type="text" class="input" placeholder="搜索育儿知识">
               </div>
            </div>

            <div class="null"></div>
            <div class="table">
                <div class="label"><input type="button" value="科学喂养" class="k"></div>
                <div class="d">
                        <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                        <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                       <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                </div>
            </div>
            <div class="table">
                <div class="label"><input type="button" value="辅食添加" class="k"></div>
                <div class="d">
                        <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                        <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                       <div class="bn">
                            <button class="btn">奶粉喂养</button>
                            <button class="btn">食材挑选</button>
                            <button class="btn">喂奶</button>
                        </div>
                </div>
            </div>


            
        </div>
    </div>

</template>

<style lang="">
   .k{
        height: 40px;
       width: 112px;
       margin: 0;
       padding: 0;
       border:0px;
       background:none;
       font-size: 20px;
       color: blueviolet;
       outline: none;
   }
   .d{
       margin-top:20px;
   }
    .a{
        text-align: left;
        width: 375px;
        height: 812px;
  
    }
    .xian{
        height: 1px;
        background-color: darkgray;
    }   
    .fixed{
        position: fixed;
        width: 375px;
    } 
    .select{
        border: none;
        outline: none;

        font-size: 20px;
        color: blueviolet;   
    }
    .sel{
        width: 70px;
        height: 30px;
        margin-top:13px;
        margin-left: 10px;
        float: left;
    }
    .c{ 
        width: 375px;
        height: 50px;
    }
    .inp{
        margin-left: 105px;
    }
    .input{
        width: 215px;
        height: 30px;
        margin-top: 7px;
        border:#f5f5f5 2px solid;
        border-radius: 20px;
        background: #f5f5f5;
        outline:none;
        padding-left:40px;
    }
    .image{
      position: absolute;
      right: 235px;
      top: 82px;
      width: 30px;
      height: 30px;
    }

    .null{
        width: 350px;
        height:140px ;
        background-color:#f5f5f5;
        margin-left: 13px;
        margin-top: 10px;
    } 
    .table{
        width: 350px;
        height: 200px;
        margin-left: 13px;
        margin-top: 15px;
        text-align: center;
        font-size: 20px;
        color: cornflowerblue;

    }
   a{
       text-decoration:none;
   }
   .btn{
       height: 40px;
       width: 112px;
       margin: 0;
       padding: 0;
       border:0px;
       background-color:#f5f5f5;
       font-size: 15px;
       color: blueviolet;
       outline: none;
       
   }
   .bn{
       margin-top: 10px;
   }
</style>